<template>
	<view class="moreSheet">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="toSongSheet(item.id)">
				<image :src="pubUrl + item.musicListImg" class="cover"></image>
				<view class="title">{{ item.musicListName }}</view>
			</view>
			<view class="item" v-if="list.length / 3"></view>
			<view class="item" v-if="list.length / 3"></view>
		</view>
	</view>
</template>

<script>
import { getMenuAll } from '@/api/song.js';
import { pubUrl } from '@/api/http.js';
export default {
	data() {
		return { list: [], pubUrl: '' };
	},
	methods: {
		//跳转歌曲详情页面
		toSongSheet(id) {
			uni.navigateTo({
				url: '/pages/songSheet/songSheet?id=' + id
			});
		},
		//获取歌单列表
		getMenuList() {
			getMenuAll().then(res => {
				this.list = res.data;
			});
		}
	},
	onLoad() {
		this.pubUrl = pubUrl;
		this.getMenuList();
	}
};
</script>

<style lang="less">
.moreSheet {
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		.item {
			width: 100px;
			color: #000;
			margin: 8px;
			margin-bottom: 0;

			.cover {
				width: 100px;
				height: 100px;
				border-radius: 5px;
			}
			.title {
				width: 100px;
				font-size: 10px;
			}
		}
	}
}
</style>
